<template>
  <div>
    <div class="table-data" v-show="tabShow">
      <!-- <div class="table-state">
        <el-button size="small" type="primary" @click="handleAddUser">新建权限组</el-button>
      </div> -->
      <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData" :header-cell-style="headClass" style="width:100%" :height="tHeight" class="table-box">
        <el-table-column label="id" width="120" prop="id"></el-table-column>
        <el-table-column label="权限组名称" width="120" prop="name"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="创建时间" prop="create_time"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <router-link  :to="{name:'systemEdit',query:{id:scope.row.id}}" @click.native="handleEdit(scope.$index,scope.row)" class="user-detail el-button el-button--primary el-button--mini">修改</router-link>
            <router-link  :to="{name:'systemAdd',query:{id:scope.row.id}}" @click.native="handleAddUser(scope.$index,scope.row)" class="user-detail el-button el-button--primary el-button--mini">新建权限组</router-link>
            <!-- <el-switch v-model="state" @change="handleState(row)" active-text="启用" inactive-text="禁用"></el-switch> -->
            <el-button v-if="scope.row.status!=1" @click="handleDisable(1,scope.row)" size="mini" type="primary">启用</el-button>
            <el-button v-else @click="handleDisable(0,scope.row)" size="mini" type="danger">禁用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="pages" ref="page-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10,30,50]"
          :page-size="size"
          layout="total,sizes,prev,pager,next,jumper"
          :total="total"
        ></el-pagination>
      </div> -->
    </div>
    <router-view @loadData="loadData" :tabShow="tabShow"></router-view>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import systemApi from "@/api/system";
// import { State, Getter, Mutation, Action } from "vuex-class";
@Component({
  components: { }
})
export default class TableData extends Vue {
  // @Getter("user") getUser: any;
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Provide() state: Boolean = true; // 状态
  @Prop({}) tabVisible!: any;
  @Provide() status: number = 0;
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() formData: any = {
    pageNum:1,
    pageSize:10 
  };
  @Watch("$route") handleRouteChange(to: any,form:any) {
    if(form.path!='/systemGroupList'){
      this.tabShow=this.tabVisible;
    }
  }
  headClass() {
    return "text-align: center;background:#eef1f6;";
  }
  // 禁用启用
  handleDisable(i,row:any){
    if(i==1){
      this.status=1
    }else{
      this.status=0
    }
    systemApi.disabledSystemGroup(row.id,this.status)
    .then((res: any) => {
      if(res.data.status){
        this.$message({
          message: '操作成功',
          type: "success"
        });
      }
      this.loadData()
    });
  }
  
  // 新建用户
  handleAddUser(){
    this.tabShow=false
    // this.$router.push({
    //   path:'/systemList/add'
    // })
  }
  // 编辑
  handleEdit(index: number,row: any){
    this.tabShow=false
  }

  created() {
    this.loadData();
    if(this.$route.path!='/systemGroupList'){
      this.tabShow=false
    }
  }

  loadData() {
    systemApi.systemGropuList()
      .then((res: any) => {
        this.tableData=res.data.data.list
        res.data.data.list.forEach((i:any,item:any)=>{
          if(item.status==1){
            item.isState==true
          }else{
            item.isState==false
          }
        })
        this.loading=false
    });
  }

  handleSizeChange(val: number): void {
    this.formData.pageSize = val;
    this.formData.pageNum = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.formData.pageNum = val;
    this.loadData();
  }
}
</script>

<style lang="scss" scoped>
.el-date-editor{
  margin-right: 10px;
}
</style>
